import { FC, useEffect, useState } from 'react';
import { Descriptions, Card, Button } from 'antd'
import styles from './index.module.less'

import * as echarts from 'echarts';
const Dashboard: FC = () => {
    const [orderRefresh, setOrderRefresh] = useState(1);
    const handleRefreshOrder = () => {
        setOrderRefresh((e) => e + 1);
    }
    useEffect(() => {
        const lineChart = document.getElementById('orderCharts') as HTMLElement;
        const myChart = echarts.init(lineChart);
        myChart.setOption({
            // title: {
            //     text: '订单和流水走势图'
            // },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: ['订单数量']
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260, 223, 334, 512, 212, 110],
                    type: 'line',
                    name: "订单数量"
                }
            ]
        });

        const peiCity1 = echarts.init(document.getElementById('peiCity1'));
        const peiCity2 = echarts.init(document.getElementById('peiCity2'));
        peiCity1.setOption({
            title: {
                text: '司机城市分布',
                left: 'center',
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '城市分布',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 335, name: '北京' },
                        { value: 310, name: '上海' },
                        { value: 274, name: '广州' },
                        { value: 235, name: '武汉' },
                    ],
                    itemStyle: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                }
            ]
        });
        peiCity2.setOption({
            title: {
                text: '司机年龄分布',
                left: 'center',
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '司机年龄分布',
                    type: 'pie',
                    radius: [50, 180],
                    data: [
                        { value: 335, name: '20-30岁' },
                        { value: 310, name: '30-40岁' },
                        { value: 274, name: '40-50岁' },
                        { value: 235, name: '50岁以上' },
                    ],
                    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
                    roseType: 'radius',
                    center: ['50%', '50%'],
                }
            ]
        });

    }, [orderRefresh]);
    const items = [{
        key: '1',
        label: '订单数量',
        children: '11222',
    }, {
        key: '2',
        label: '金额',
        children: '1810000000',
    }, {
        key: '3',
        label: '客单价',
        children: '22',
    }, {
        key: '4',
        label: '新增客户',
        children: '23',
    }]
    return (
        <div className={styles.dashboard}>
            <div className={styles.dashboard}>
                <Descriptions title="今日数据" items={items} />
            </div>
            <Card title="订单和流水走势图" extra={<Button type='primary' onClick={handleRefreshOrder}>刷新</Button>} style={{ width: '100%', marginTop: 10 }}>
                <div id="orderCharts" style={{ width: '100%', height: '300px' }}></div>
            </Card>
            <Card title="货运司机统计" extra={<Button type='primary' onClick={handleRefreshOrder}>刷新</Button>} style={{ width: '100%', marginTop: 10 }}>
                <div className={styles.pie_flex}>
                    <div id="peiCity1" style={{ width: '50%', height: '500px' }}></div>
                    <div id="peiCity2" style={{ width: '50%', height: '500px' }}></div>
                </div>
            </Card>
        </div>
    )
}

export default Dashboard